<template>
  <div class="container">
    <el-card>
      <subjectsSouSuo :obj="requestParameters" @Choice="Choice" @questions="searchfn" />
      <!-- xia -->
      <el-alert v-if="alertText !== ''" :closable="false" :title="`数据一共 ${alertText}条`" class="alert" show-icon type="info" />
      <!-- end -->
      <!-- 数据 -->
      <el-table v-loading="listLoading" :data="dataList" border element-loading-text="给我一点时间" fit highlight-current-row style="width: 100%">
        <!-- 试题编号 -->
        <el-table-column align="left" label="试题编号" prop="number" type="index" width="250px">
          <template slot-scope="scope">
            <el-row justify="start" type="flex">
              <span v-cloak :style="{fontSize:'14px'}">{{ scope.row.number }}</span>
            </el-row>
          </template>
        </el-table-column>
        <!-- 学科 -->
        <el-table-column label="学科" width="80px">
          <template slot-scope="scope">
            <span>{{ scope.row.subject }}</span>
          </template>
        </el-table-column>
        <!-- 目录 -->
        <el-table-column align="center" label="目录" width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.catalog }}</span>
          </template>
        </el-table-column>
        <!-- 题型 -->

        <el-table-column :formatter="FormatterQuestionType" label="题型" prop="questionType" width="100px" />
        <!-- 题干 -->
        <!--记住scope.row=== dataList -->
        <el-table-column align="center" label="题干">
          <template slot-scope="scope" show-overflow-tooltip="true">
            <span v-cloak v-html="scope.row.question" />
          </template>
        </el-table-column>
        <!-- 录入时间 -->
        <el-table-column align="center" label="录入时间" width="150px">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate|formatDate('yyyy-MM-dd hh:mm:ss') }}</span>
          </template>
        </el-table-column>
        <!-- 难度 -->
        <el-table-column :formatter="FormatterQuestionType" label="难度" prop="difficulty" width="50px" />
        <!-- 录入人 -->
        <el-table-column label="录入人" width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.creator }}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" prop="id" width="200px">
          <el-row slot-scope="scope">
            <!--题目预览  -->
            <el-button circle icon="el-icon-view" plain type="primary" @click="viewExam(scope.row)" />
            <!-- 跳转到精选题库 -->
            <el-button circle icon="el-icon-edit" plain type="success" @click="editExam(scope.row.id)" />
            <!-- 删除题目 -->
            <el-button circle icon="el-icon-delete" plain type="warning" @click="delExam(scope.row)" />
            <!-- 收藏为精选 -->
            <el-button circle icon="el-icon-check" plain type="danger" @click="checkExam(scope.row)" />
          </el-row>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="requestParameters.page"
        :page-size="requestParameters.pagesize"
        :page-sizes="[10,20,30]"
        :total="requestParameters.counts"
        v-if="paginationShow"
        align="right"
        background
        layout=" prev, pager, next,sizes, jumper"
        style="padding-top: 20px;"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </el-card>
    <!-- 预览题库 -->
    <el-dialog :visible.sync="showCodeDialog" title="题目预览">
      <questionsPreview v-if="showCodeDialog" ref="previewQuestions" @showCodeDialog="showCodeDialog=false" />
    </el-dialog>
  </div>
</template>

<script>
// 请求基础题库
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
// 题目预览   组件questions-preview
import questionsPreview from '../components/questions-preview'
import subjectsSouSuo from '../components/subjects-sousuo'
export default {
  name: 'Questions',
  components: {
    questionsPreview,
    subjectsSouSuo
  },
  data() {
    return {
      // 新的
      dataList: [], // 请求来的基本题库数据
      alertText: 0,
      listLoading: false,
      showCodeDialog: false, // 题目预览   组件questions-preview
      // 分页
      requestParameters: {
        page: 1, // 每一页的页码值
        pagesize: 10, //	每页显示条目个数，支持 .sync 修饰符
        counts: 0, // 总条数
        flag: 1
      },
      paginationShow: true,
      dataList2: [] // 获取来的数据
    }
  },
  created() {
    this.examList()
  },
  methods: {
    // 获取基本题库接口
    async examList() {
      this.dataList = []
      this.listLoading = true
      try {
        const { data } = await list(this.requestParameters)
        this.dataList2 = data.items
        this.dataList = this.dataList2
        this.alertText = data.counts
        // 题型
        this.requestParameters.counts = data.counts
        this.listLoading = false
      } catch (error) {
        this.$message.error('数据请求失败')
      }
    },
    // 题目预览
    viewExam(data) {
      this.showCodeDialog = true
      this.isShow = true
      // 请求调用子组件里面的方法  顺便传入id
      this.$nextTick(() => {
        this.$refs.previewQuestions.detail(data)
      })
    },
    // 跳转到试题录入
    editExam(id) {
      this.$router.push({ name: 'questions-new', query: { id: id }})
    },
    // 删除当前的试题
    async delExam(data) {
      try {
        this.listLoading = true
        await remove(data)
        const index = this.dataList.findIndex((item) => item === data)
        await this.dataList2.splice(index, 1)
        this.dataList = this.dataList2
        this.$message.success('删除数据成功')
        this.alertText--
        this.requestParameters.page = Math.ceil(this.requestParameters.counts / this.requestParameters.pagesize)
        this.listLoading = false
      } catch (error) {
        this.$message.error('数据请求失败')
      }
    },
    // 收藏到精选题库
    checkExam(data) {
      this.$confirm('是否继续操作加入精选？?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          data.choiceState = 1
          await choiceAdd(data)
          const index = this.dataList.findIndex((item) => item === data)
          await this.dataList2.splice(index, 1)
          this.dataList = this.dataList2
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.alertText--
        })
        .catch(() => {
          this.$message({
            message: '已取消添加'
          })
        })
    },
    // 使用枚举值
    FormatterType(row, column, cellValue, index) {
      const obj = questionType.find((item) => item.value + '' === row.questionType)
      return obj ? obj.label : '未知'
    },
    // 使用枚举值
    FormatterQuestionType(row, column, cellValue, index) {
      const obj = difficulty.find((item) => item.value + '' === row.questionType)
      return obj ? obj.label : '未知'
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.page = val
      this.examList()
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.requestParameters.pagesize = val
      this.examList()
    },
    // 通过搜索数据进行搜索
    searchfn(val) {
      if (val === '') {
        this.dataList = this.dataList2
      }
      const add = this.dataList2.filter((item) => val.some((item2) => item.id === item2.id))
      this.requestParameters.page = 1
      this.alertText = add.length
      this.dataList = add
      this.requestParameters.counts = add.length
      this.listLoading = false
    },
    // 清除搜索框内容
    Choice(val) {
      console.log(val)
      this.examList(val)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-table th {
    background-color: #fafafa;
}
.alert {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 10px;
}
.pagination {
    padding-top: 25px;
}
el-table-column {
    height: 10px;
}
.container {
    padding: 10px 10px;
}
</style>
